import React, { useEffect } from 'react';
import useHoxModel from '../../useHoxModel';
import { Row, Col } from 'antd';
import styles from './index.less';
import EmptyCenter from '@/components/EmptyCenter';
import IconFont from '@/components/IconFont';

const DemoStackedArea: React.FC = () => {
  const {
    getDoorDeviceStatus,
    doorDeviceStatus,
    doorDeviceStatusLoading,
  } = useHoxModel((model) => [model.doorDeviceStatus, model.doorDeviceStatusLoading]);
  useEffect(() => {
    getDoorDeviceStatus();
  }, []);
  const status = {
    onLine: {
      name: '正常设备',
      isPercentage: false,
      icon: 'iconzhengchangshebei',
    },
    alarm: {
      name: '告警设备',
      isPercentage: false,
      icon: 'icongaojingxinxi',
    },
    offLine: {
      name: '离线设备',
      isPercentage: false,
      icon: 'iconlixianshebei',
    },
  };
  const keys = Object.keys(status);
  return (
    <div className={styles['device-status-wrap']}>
      <Row>
        {keys.map((item: string, index: number) => {
          return (
            <Col span={8} key={index.toString(36) + index}>
              {status[item] && (
                <div className={styles['device-status-item']}>
                  <IconFont type={status[item].icon} className={styles['icon']} />

                  <div className={styles['content']}>
                    <div className={styles['title']}>{status[item].name}</div>

                    <div className={styles['value']}>
                      <span>{(doorDeviceStatus && doorDeviceStatus[item]) || 0}</span>
                      {status[item].isPercentage && <span className={styles['percentage']}>%</span>}
                    </div>
                  </div>
                </div>
              )}
            </Col>
          );
        })}
      </Row>
    </div>
  );
};

export default DemoStackedArea;
